<template>
<div class="cont">
    <section>
        <article><span>会员专享折扣</span><span>99元起</span></article>
         <van-swipe class="my-swipe" :autoplay="3000" indicator-color="white">
            <van-swipe-item v-for='item in vipList' :key='item.schedular_id'>
                <aside>
                    <div><img :src="item.pic" alt=""></div>
                    <div>
                        <p>{{item.schedular_name}}</p>
                        <div>
                             <span><i>{{item.min_discoun}}</i>折起</span>
                             <button>立即购买</button>
                        </div>
                    </div>
                </aside>
            </van-swipe-item>
        </van-swipe>
    </section>
   
</div>
</template>

<script>
import Vue from 'vue';
import { Swipe, SwipeItem } from 'vant';
import {mapState} from 'vuex'
Vue.use(Swipe);
Vue.use(SwipeItem);
export default {
    data () {
        return {
        }
    },
    computed:{
        ...mapState('main',['vipList'])
    }
}
</script>

<style lang='scss' scoped>
.cont{
    padding: 0 .2rem;
    section{
        border: .02rem solid #ff6600;
        background: #FFFFCC;
        padding: .2rem;
       article {
           display: flex;
           justify-content: space-between;
            border-bottom: 1px solid orange;
            color: #ff6600;
        }
    }
    
}
 .my-swipe{
     width: 100%;
     overflow: hidden;
 }
  .my-swipe .van-swipe-item {
    color: #fff;
    font-size: .2rem;
    width: 100%;
    padding: .1rem .01rem;
    overflow: hidden;
    text-align: center;
    background-color: #FFFFCC;;
    aside{
        display: flex;
         width: 100%;
        justify-content: flex-start;
        align-items: flex-start;
        div:nth-of-type(1){
            width: 1rem;
            img{
                height: 100%;
                width: 100%;
            }
        }
        div:nth-of-type(2){
              display: flex;
              color: black;
              flex-direction: column;
              align-items: flex-end;
              margin-left: .2rem;
              height:1.2rem;
              width: 70%;
              font-size: .24rem;
              line-height: .3rem;
              text-align: left;
              div{
                  margin-top: .2rem;
                  display: flex;
                  width: 100%;
                  justify-content: space-between;
                  align-items: center;
              }
              button{
                  border-radius: .2rem;
                  padding: .1rem;
                  border: salmon 1px solid;
                  color: salmon;
                  background: white;
              }
          }
    }
  }
</style>
